const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
console.log(path.resolve(__dirname, "dist"));
module.exports = {
  entry: "./src/index.js",
  mode: "development",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: "/.css/",
        include: path.resolve(__dirname, "src"),
        exclude: "/node_modules/",
        use: [
          {
            loader: "style-loader",
          },
          "css-loader",
        ],
      },
      {
        test: "/.scss/",
        include: path.resolve(__dirname, "src"),
        enclude: "/node_modules/",
        use: [
          { loader: MiniCssExtractPlugin.loader },
          "css-loader",
          "less-loader",
        ],
      },
      {
        test: "/.jpg|png|bmp|gif|svg/",
        use: [
          {
            loader: "url-loader",
            options: { limit: 4096 },
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html", // 指定模板文件
      filename: "index.html", // 产出后的文件名
      inject: false,
      hash: true,
      chunks: ["index"],
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css",
    }),
  ],
};
